2.1

Appearance

2.1

📝 Frequently Asked Questions ​

Here are the most common questions regarding Mekari Pixel.

1. What is Mekari Pixel? ​

Mekari Pixel is a design system and component library built for Mekari products. It provides a collection of reusable UI components, design tokens, patterns, and templates to help create consistent user experiences across Mekari applications.

2. What are the differences between the @mekari/pixel and @mekari/pixel3 packages? ​

  • @mekari/pixel is built for Vue 2 applications. For documentation, please visit: Storybook
  • @mekari/pixel3 is built for Vue 3 applications and is the current, latest major version

@mekari/pixel3 contains new features and improvements that are not present in @mekari/pixel, such as:

  • Improved TypeScript support
  • Better performance
  • An advanced design tokens system that seamlessly supports both light and dark modes right out of the box

Despite the differences, many components share similar APIs between versions, so most of your Vue 2 @mekari/pixel knowledge will transfer to Vue 3 @mekari/pixel3.

For new projects, we strongly recommend using @mekari/pixel3 with Vue 3.

3. Can I upgrade from @mekari/pixel to @mekari/pixel3? ​

Quick answer: No, direct migration from @mekari/pixel to @mekari/pixel3 is not possible due to:

  1. Fundamental differences between Vue 2 and Vue 3 with many breaking changes (https://v3-migration.vuejs.org/breaking-changes/)
  2. @mekari/pixel3 components were rebuilt from scratch for Vue 3, using a different component engine and resulting in different props and behaviors
  3. Changes in component APIs and architecture

Instead, we recommend:

3. Is @mekari/pixel Still Supported? ​

@mekari/pixel (the Vue 2 version) has transitioned to maintenance mode following the End of Life (EOL) of Vue 2 on December 31st, 2023 (source). While it will continue to receive necessary updates and new components, these will not be as frequent or extensive as those for @mekari/pixel3.

4. What license does Mekari Pixel use? ​

Mekari Pixel is a proprietary software solution created by PT Mid Solusi Nusantara (Mekari), designed specifically for Mekari products.

5. What browsers does Mekari Pixel support? ​

  • @mekari/pixel3 (Vue 3 version) supports modern browsers with native ES2016 support. This excludes IE11.
  • @mekari/pixel (Vue 2 version) supports older browsers including IE11.

For further information, please visit: https://vuejs.org/about/faq#what-s-the-difference-between-vue-2-and-vue-3

6. What is the difference between design token 2.1 and 2.4 in @mekari/pixel3? ​

Design tokens 2.4, introduced in @mekari/pixel3 v1.0.0, includes significant improvements over 2.1:

  • Built-in light and dark mode support
  • Theme management via usePixelTheme composable
  • Latest design token updates and improvements
  • Maintains backward compatibility with version 2.1

For new projects, we recommend using design token version 2.4 to take advantage of:

  • Modern theming capabilities
  • Simplified theme management
  • Latest design improvements
  • Better dark mode support

7. How to upgrade from design token 2.1 to 2.4? ​

Upgrading from design token 2.1 to 2.4 should be a seamless process, as version 2.4 is designed to maintain backward compatibility.

For more details, please visit: Pixel Theme

8. How to writing a custom styling in @mekari/pixel3? ​

There are three main approaches to writing custom styles in @mekari/pixel3:

  1. CSS Function
    vue
    <div :class="css({ display: 'flex', padding: '12' })">
  <MpText :class="css({ mt: '4' })">Hello</MpText>
</div>
    :br Use this when you need to:
    • Style native HTML tags
    • Override Pixel component styles (Be careful, as it can break the component built-in style, structure and behavior)
  2. CSS Props
    vue
    <MpFlex direction="column" padding="12" background="background">
  <Pixel.img height="100px" mb="4" />
</MpFlex>
    :br Use this when working with:
    • MpFlex component
    • Pixel tag components
  3. Dynamic Styles
    vue
    <MpFlex :style="{ background: token.var(`colors.${dynamicColor}`) }">
  <MpText>Dynamic content</MpText>
</MpFlex>
    :br Use this for runtime/dynamic styling needs.

All approaches support:

For more detailed information, visit:

9. Does @mekari/pixel3 include pattern collections like @mekari/pixel? ​

Yes, @mekari/pixel3 has patterns collections like in @mekari/pixel. Please visit: Patterns.

But not all patterns in @mekari/pixel are available in @mekari/pixel3, we are working on it.

10. Does @mekari/pixel3 include template collections like @mekari/pixel? ​

Yes, @mekari/pixel3 has template collections like in @mekari/pixel. Please visit: Templates.

But not all templates in @mekari/pixel are available in @mekari/pixel3, we are working on it.

© Copyright 2024 PT Mid Solusi Nusantara.