Tokens

Overview

Resources

Install


yarn add @camp/tokens

Upgrading to Next Gen

🎨 Updated color palette with an eye toward accessibility

🔄 New semantic naming, making it easier to apply tokens across the platform

🧩 More streamlined code offering CSS custom properties and Typescript tokens for CSS-in-JS

Previous implementation

Previously, you might have imported tokens like this for use in CSS-in-JS:


import { slate600 } from '@activecampaign/camp-tokens-color';
 
...
 
const myComponentStyles = {
	span: {
    borderBottom: `1px ${slate600} solid`,
	}
};

New implementation

With Next Gen, tokens can be used in any styling implementation.

We recommend using CSS custom properties for styling wherever possible. Here’s an example of how to use these with CSS Modules:


/* styles.module.css */
@import '@camp/tokens/dist/tokens.css';
 
.wrapper {
  margin-bottom: var(--space-3);
}


// MyComponent.tsx
import React from 'react';
import { Button } from '@camp/button';
import styles from './styles.module.css';
 
export const MyWrapper = () => (
  <div className={styles.wrapper}>
    <Button>Click me</Button>
  </div>
);

Here’s another example of how to use tokens in CSS-in-JS:


import {
  Space,
  SemanticColors,
  IconColors,
  Border,
  BoxShadow,
  Motion,
  Breakpoints,
} from '@camp/tokens';
 
export const MyStyledComponent = styled('div')`
    ...
    margin: ${Space['1']};
    border: ${Border['1']} ${Border['solid']} ${SemanticColors['border-default']};
    borderRadius: ${Border.radius['2']};
`;

For more details on styling implementations available in Next Gen, see the Next Gen Styling page.

Migration steps

Update import path: Replace the old token imports to import your desired token group from @camp/tokens.
Use these token values in place of old token values in your styles. No other changes are needed.