Alma Design System Tokens

Welcome to Alma Design System Tokens, the official token library made with Style Dictionary from Dasa.

Installation

To add Alma Tokens to your project, open your terminal and run the following command:

yarn add @dasa-health/alma-tokens

Usage

Importing Tokens in JavaScript/TypeScript

You can import the specific tokens you need in your JavaScript or TypeScript file like this:

import { almTokens, navTokens, dasTokens } from '@dasa-health/alma-tokens';

Using Tokens in Styled Components / Emotion

You can reference the tokens you need in your CSS like this:

import styled from 'styled-components';

const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: ${({ almTokens }) => almTokens.border.radius.medium};
  color: ${({ almTokens }) => almTokens.color.interaction.accent['02']};
  border: 2px solid ${({ almTokens }) => almTokens.color.interaction.subtle['01']};
`;

Using Tokens in Plain CSS

You can import the required token files like this:

import { navCSS, dasCSS } from "@dasa-health/alma-tokens";

Using Tokens in JSON

You can import the required token files like this:

import { navJSON, dasJSON } from "@dasa-health/alma-tokens";

Learn More

For more information on the tokens available in Alma Design System Tokens, please refer to our documentation.