@healform/design-tokens v3.1.0
@healform/design-tokens
Automatically generate visual primitives such as typography, color, and spacing that are shared across platforms.
Installation
Depending on your preference, run one of the following in your terminal:
# With Yarn
yarn add @healform/design-tokens
# With npm
npm install @healform/design-tokens
What's included
design-tokens/
├── src
└── dist/
├── css/
│ ├── variables-host.css
│ └── variables-root.css
├── js/
│ ├── tokens.d.ts
│ └── tokens.js
├── json/
│ ├── tokens-flat.json
│ ├── tokens-nested.json
│ └── tokens-raw.json
├── less/
│ └── variables.less
└── scss/
├── variables.scss
└── variables-map.scss
Usage
The package currently exports a single theme that is meant to be used with HEALFORM's React component library, Liquid UI.
JavaScript
import tokens from "@healform/design-tokens/dist/js/tokens";
const Colored = styled.strong`
color: ${tokens.colors.primary.value};
`;
const App = () => (
<Colored>This styled component has access to the theme.</Colored>
);
CSS
import "@healform/design-tokens/dist/css/variables--root.css"
#example {
background: var(--colors-white);
color: var(--colors-black);
}
#example a {
color: var(--colors-primary);
padding: var(--spacings-md);
}
Import via UNPKG CDN
All design tokens are also automatically accessible via the UNPKG CDN after each release.
<link rel="stylesheet" href="https://unpkg.com/@healform/design-tokens@latest/dist/css/variables--root.css">
Development
Conventional Commits
Please follow the Conventional Commits specification to make sure we can automatically determine the next release version if necessary.
Deployment
TravisCI is building as soon as a branch gets merged into the master branch. After successful linting, the HEALFORM Design Tokens package will be published to npm. You can find the package on npm here.
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago