Welcome to the @signozhq/design-tokens package! This package provides a set of design tokens that can be used across your projects to maintain consistency in design and styling.
- Design Tokens: Easily manage and use design tokens for colors, spacing, and typography.
- TypeScript Support: Fully typed definitions for better development experience.
- Tailwind Compatibility: Generate tokens compatible with Tailwind CSS.
- Build Tools: Integrated with Vite for fast builds and development.
To install the package, use npm or yarn:
npm install @signozhq/design-tokensor
yarn add @signozhq/design-tokensYou can import the design tokens in your project as follows:
Direct access to raw values for colors, spacing, and typography.
import { Color, Spacing, Typography } from '@signozhq/design-tokens';
// Example usage
const backgroundColor = Color.BG_ROBIN_100;
const color = Color.BG_ROBIN_500;
const padding = Spacing.PADDING_4;
const fontSize = Typography.FONTSIZE_BASE;Additionally, you can import the generated CSS files that contain all the variables:
The preferred way to style components using theme-aware tokens.
import { Style } from '@signozhq/design-tokens';
// Returns the CSS variable string, e.g., "var(--background)"
const bg = Style.BACKGROUND;
const primary = Style.PRIMARY;For Tailwind CSS (v3) configuration:
import { StyleTailwind } from '@signozhq/design-tokens';
// In your tailwind.config.js
module.exports = {
theme: {
extend: {
colors: StyleTailwind,
},
},
};Apply full typography sets (font-family, size, weight, line-height) as a single object.
import { TypographyStyles } from '@signozhq/design-tokens';
// Apply as an object in React
<p style={TypographyStyles.PARAGRAPH_MEDIUM_400}>Hello SigNoz</p>Enable theme switching by importing the theme files and setting the data-theme attribute.
<!-- Switch themes via data-theme attribute on <html> or <body> -->
<html data-theme="signoz">
...
</html>
<!-- default -->
<html data-theme="blue">
...
</html>/* Import themes */
@import '@signozhq/design-tokens/style.css';
@import '@signozhq/design-tokens/dist/themes/signoz-tokens.css';
@import '@signozhq/design-tokens/dist/themes/blue-tokens.css';Color.BG_ROBIN_100Color.BG_SIENNA_200Color.TEXT_CHERRY_500- ... (and many more)
Spacing.PADDING_1Spacing.MARGIN_4- ... (and many more)
Typography.FONTSIZE_SMTypography.FONTWEIGHT_BOLD- ... (and many more)
Native support for Tailwind v4 theme variables.
@import '@signozhq/design-tokens/dist/tailwind-theme.css';To regenerate tokens from JSON sources:
pnpm generate-tokens