Testing for Design Tokens, will be deleted later.

Usage

CSS

@import '@chriddell/design-system/tokens.css';

.my-component {
  font-size: var(--font-size-f3);
}

Javascript

import tokens from '@chriddell/design-system/tokens.json';

const config = {
  'font-size-massive': tokens.typography.['size.f6'];
};

Tailwind v4

Version 4 of Tailwind generates CSS classes from CSS variables which follow a naming convention (spacing-x, text-x etc.).

You can read more about it here: https://tailwindcss.com/docs/theme.

@import '@chriddell/design-system/tailwind.css';

/* relevant classnames will be generated automatically, so you can... */

<div className="mb-2xl pt-050 text-f5">
  My div
</div>