@ibexui/core

The foundation of the IbexUI design system. This package manages design tokens, theme algorithms, and the core styling engine.

📦 Installation

pnpm add @ibexui/core

🧩 Key Concepts

Seed Tokens

The base values of the design system. Everything is derived from these.

• colorPrimary
• fontSize
• borderRadius
• fontFamily

Map Tokens

Derived tokens calculated from seed tokens using algorithms (e.g., generating light/dark variants).

Alias Tokens

Semantic aliases that provide meaning to tokens (e.g., colorLink maps to colorPrimary).

Theme Algorithms

Functions that transform seed tokens into map tokens.

• defaultAlgorithm: The standard light theme.
• darkAlgorithm: Generates dark mode tokens.
• compactAlgorithm: Reduces spacing and font sizes for dense UIs.

🚀 Usage

Typically used internally by @ibexui/components, but can be used for custom styling:

import { theme } from "@ibexui/core";

const { useToken } = theme;

function CustomComponent() {
  const { token } = useToken();

  return <div style={{ color: token.colorPrimary }}>Custom Styled Text</div>;
}

📄 License

MIT