@hobui/tokens

iNET Design System — Design tokens cho CSS custom properties, JS constants, và Tailwind CSS.

Cài đặt

npm install @hobui/tokens
# hoặc
pnpm add @hobui/tokens

Sử dụng

CSS Variables (khuyến nghị)

/* Import toàn bộ CSS custom properties */
@import '@hobui/tokens/css';

.button {
  background-color: var(--color-brand-primary);
  padding: var(--spacing-4) var(--spacing-8);
  border-radius: var(--shape-radius-md);
  font-size: var(--typography-body-md-size);
}

JS / TypeScript — Named Tokens

import { colorTokens, spacingTokens, typographyTokens } from '@hobui/tokens'

// Dùng trong logic hoặc inline styles
const primary = colorTokens['color-brand-primary'] // '#FF6B00'
const gap = spacingTokens['spacing-4']              // '16px'

JS — iNET Brand Tokens (Single Source of Truth)

import inetDesignTokens from '@hobui/tokens'

const primary = inetDesignTokens.primary.default

Raw Tokens (JSON-friendly)

import { rawTokens } from '@hobui/tokens/raw'

// rawTokens: Record<string, string | number>
console.log(rawTokens)

Tailwind CSS

// tailwind.config.js
import { colorTokens, spacingTokens } from '@hobui/tokens'

export default {
  theme: {
    extend: {
      colors: colorTokens,
      spacing: spacingTokens,
    },
  },
}

Token Categories

| Category | Export | Mô tả | |--------------|-----------------------|-------------------------------| | Màu sắc | colorTokens | Brand, semantic, neutral colors | | Kiểu chữ | typographyTokens | Font size, weight, line height | | Khoảng cách | spacingTokens | 8pt grid spacing scale | | Độ nổi | elevationTokens | Box shadow levels | | Hình dạng | shapeTokens | Border radius | | Chuyển động | motionTokens | Duration & easing | | Z-Index | zIndexTokens | Stacking order | | Breakpoints | breakpointTokens | Responsive breakpoints |

Tài liệu

Xem đầy đủ tại iNET Design System Storybook.

License

MIT