What's New in Pixel Vue3 v1

Welcome to the latest version of Mekari Pixel Vue3! 🎉

This update brings several exciting features designed to enhance your development experience and improve UI consistency.

🔥 New Features

Design Token 2.4

In the previous version (Token 2.1) provided a structured way to manage design tokens across our components. With this update, we’re introducing Token 2.4, which enhances the system with Semantic Tokens and full Dark Mode support.

This new version simplifies token naming, improves consistency, and allows for dynamic theme adaptation without additional configuration. However, if you're not ready to transition immediately, you can still use Token 2.1 or switch to Token 2.4 at your own pace. Both versions remain supported, giving you flexibility in maintaining or gradually updating your implementation.

You can easily switch to the new theme system ( Token 2.4) using the following API:

import { usePixelTheme } from '@mekari/pixel3'

const { isNextTheme, setNextTheme } = usePixelTheme()

setNextTheme(true)  // Enable next theme (Token 2.4)
setNextTheme(false) // Disable next theme, Revert to light mode and previous theme (Token 2.1)

Dark Mode Support

Dark Mode is now fully integrated into Mekari Pixel, ensuring a smooth and visually balanced experience across all components. This update enhances contrast, improves readability, and adapts seamlessly to user preferences.

With automatic theme switching, your UI will look great in both light and dark environments—no extra configuration needed. If you need manual control, you can easily toggle dark mode using the following API:

import { usePixelTheme } from '@mekari/pixel3'  
const { isDark, setDarkMode } = usePixelTheme()  
setDarkMode(true)  // Enable dark mode 
setDarkMode(false) // Enable light mode

New Components

We’ve added two powerful new components:

• MpAireneButton (NEW 🎉) A specialized button designed for Airene, offering a sleek and accessible experience.
• MpTextlink (NEW 🎉) A lightweight text-based link component, perfect for inline navigation. It serves as a replacement for <MpButton variant="textLink">.

These components are now available and fully compatible with both Token 2.1 and Token 2.4, ensuring seamless integration into your existing projects.

Component Enhancements

Several components have been improved with new props and variants:

• MpButton – Added tertiary variant and isFullWidth prop.
• MpBadge – Added for and type props.
• MpBroadcast – Introduced a new critical variant.
• MpColorPicker – Added isDisabled prop.
• MpDivider – Now includes a label prop.
• MpProgress – Updated the default color to sky and introduced additional color options.
• MpAvatar & MpAvatarGroup – Default size prop is now lg.
• MpIcon – Default size is now sm.

⚠️ Breaking Changes

There are no breaking changes in this release! 🎉

While some props have been deprecated, they remain functional as they are automatically mapped to the new properties. This ensures a smooth transition without requiring immediate updates to your existing code.

We recommend gradually migrating to the new props for better consistency and future compatibility, but your current implementation will continue to work as expected.

📖 Migration Guide

Upgrading to the latest version of Mekari Pixel is straightforward. Follow the steps below based on your package manager:

1️⃣ Update to the latest version

Run the appropriate command for your package manager:

• pnpm

pnpm update @mekari/pixel3

• npm

  npm update @mekari/pixel3

• yarn

yarn upgrade @mekari/pixel3

2️⃣ Enable Design Token 2.4 (Optional, if you want to switch to the new token system)

If you want to migrate to Token 2.4, you can enable it dynamically in your project:

import { usePixelTheme } from '@mekari/pixel3'  
const { isNextTheme, setNextTheme } = usePixelTheme()  
setNextTheme(true)  // Enable next theme (Token 2.4) 
setNextTheme(false) // Revert to light mode (Token 2.1)

3️⃣ Review Deprecated Props (Optional, but recommended)

Even though there are no breaking changes, some props have been deprecated in favor of new ones. We recommend updating your components to use the latest prop names for future compatibility.