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;
}
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to use english everywhere ;)
Code of conduct
We have a code of conduct,
please follow it in all your interactions with the project.
Contributing guide
Read the contributing guide
to learn how to propose changes and understand our development process.
Versioning
We use SemVer for versioning. For the versions available, see the tags on this repository.
Resources