@dgtal-ui/tokens v2.2.0

@dgtal-ui/tokens

Design tokens and CSS utilities for the Dgtal UI design system.

Installation

npm install @dgtal-ui/tokens

Usage

Import Styles

// Import in your main.ts or styles.scss
import '@dgtal-ui/tokens/dist/styles.min.css';

Use CSS Classes

<!-- Use utility classes in your HTML -->
<div class="dgtal-flex dgtal-items-center dgtal-justify-between">
  <span class="dgtal-text-lg dgtal-font-bold">Title</span>
  <button class="dgtal-bg-primary dgtal-text-white">Action</button>
</div>

Import JavaScript Tokens

import { colors, spacing, typography } from '@dgtal-ui/tokens';

// Use tokens in your code
const primaryColor = colors.primary;
const spacing4 = spacing[4]; // 1rem

Available Tokens

• Colors
• Typography
• Spacing
• Layout
• Flexbox
• Effects
• Border
• And more...

License

MIT © Dgtal Lab