@miracledesign/design-tokens

Miracle Design Tokens are the single source of truth for core design values, stored in a technology-agnostic JSON format to ensure consistency across Miracle products.

📦 Installation

npm install @miracledesign/design-tokens
# or
yarn add @miracledesign/design-tokens

// Add or import these CSS files to use the design tokens
@import "@miracledesign/design-tokens/dist/web/css/global-tokens.css"
@import "@miracledesign/design-tokens/dist/web/css/alias-light-tokens.css"
@import "@miracledesign/design-tokens/dist/web/css/alias-dark-tokens.css"

Changelog

[0.1.7] - 2025-12-07

Changed

• Tunning color background and border alias token

[0.1.6] - 2025-12-06

Changed

• Change outputReferences format alias token
• Change alias color background surface strong

[0.1.5] - 2025-12-06

Changed

• Tunning global and alias token color

[0.1.4] - 2025-11-30

Changed

• Tunning alias token color

[0.1.3] - 2025-11-28

Changed

• Change font weight body-1 from 500 to 400
• Change font weight title-1 from 600 to 500

[0.1.2] - 2025-11-28

Changed

• Rename global and alias token category from "size" to "dimension"
• Adjusted color values

[0.1.1] - 2025-11-27

Fixed

• Fix missing folder /dist folder

[0.1.0] - 2025-11-27

Added

• Add new Miracle Design tokens for CSS (Global and Alias).