@adam-milo/tokens

Design tokens for the Adam Milo Design System (Smart V2).

Installation

npm install @adam-milo/tokens

Usage

JavaScript/TypeScript

import { colors, spacing, fontSize } from '@adam-milo/tokens';
// Or import everything
import tokens from '@adam-milo/tokens';

console.log(colors.action); // '#272643'
console.log(spacing[4]); // '1rem'
console.log(fontSize['title-8']); // ['1rem', { lineHeight: '1.2', fontWeight: '700' }]

CSS Variables

Import the CSS file to use design tokens as CSS custom properties:

/* In your main CSS file */
@import '@adam-milo/tokens/tokens.css';

/* Now you can use the tokens */
.my-component {
  color: var(--color-text);
  padding: var(--spacing-4);
  font-size: var(--font-size-8);
  border-radius: var(--radius-md);
}

Or in your HTML:

<link rel="stylesheet" href="node_modules/@adam-milo/tokens/dist/tokens.css" />

Or import in JavaScript (for bundlers like Vite/Webpack):

import '@adam-milo/tokens/tokens.css';

Selective Imports

import { colors } from '@adam-milo/tokens/colors';
import { spacing } from '@adam-milo/tokens/spacing';
import { fontSize } from '@adam-milo/tokens/typography';

Tokens

Colors

• Main Colors: text, action, clickable, popup, error, toggle, secondary, card
• Greys: bg, bgSecondary, border, iconSecondary, systemText, grey-07
• Legacy Colors: primary, secondary, neutral, success, danger (with 50-950 shades)
• Gradients: primary gradient

CSS Variables:

• --color-text, --color-action, --color-clickable, etc.

Spacing

Spacing scale from 0 to 16 (0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 10, 11, 12, 14, 16) All values in rem units.

CSS Variables:

• --spacing-0-5, --spacing-1, --spacing-2, --spacing-4, etc.

Border Radius

Scale: sm, default, md, lg, xl, 2xl, 3xl, 4xl

CSS Variables:

• --radius-sm, --radius-default, --radius-md, --radius-lg, etc.

Typography

• Smart V2 Scale: title-1 through title-10, text-1 through text-10
• Font Family: Almoni DL AAA
• Legacy: h1, h2, h3, h4, body-lg, body, body-sm, caption

CSS Variables:

• --font-size-1 through --font-size-10

TypeScript

Full TypeScript support with exported types:

import type { Colors, Spacing, FontSize } from '@adam-milo/tokens';

Formats

This package exports tokens in multiple formats:

1. JavaScript/TypeScript - For programmatic use in React, Node.js, etc.
2. CSS Custom Properties - For use in any CSS framework (React, Vue, Angular, vanilla)

Use Cases

React Components (JavaScript)

import { colors, spacing } from '@adam-milo/tokens';

const buttonStyles = {
  backgroundColor: colors.action,
  padding: spacing[4],
};

Vanilla CSS

@import '@adam-milo/tokens/tokens.css';

.button {
  background-color: var(--color-action);
  padding: var(--spacing-4);
}

Tailwind Configuration

import { colors, spacing } from '@adam-milo/tokens';

export default {
  theme: {
    extend: {
      colors,
      spacing,
    },
  },
};

License

MIT