Tokens

Concord exports its design tokens as TypeScript enums. Each category of token has its own enum, with the corresponding values defined as references to the corresponding CSS custom properties.

You can reference these tokens in inline styles (or CSS-in-JS styles) in your app. This gives you type safety and IDE autocompletion, while still allowing any custom theming or other overrides to work properly.

Available Enums

• BorderWidth
• Color
• Duration
• EasingFunction
• FontFamily
• FontSize
• FontWeight
• Radius
• Shadow
• Space

Example Usage

import { Color } from "@jrgermain/concord";

const MyComponent = () => {
  return (
    <div style={{ color: Color.Brand3 }}>
      The color of this div is "var(--color-brand-3)"
    </div>
  );
};