@vnkr-labs/mobile

React Native design tokens cho VNKR Design System.
Bám sát Color palette.png gốc — 1 nguồn token duy nhất cho cả web và mobile.

Cài đặt

npm install @vnkr-labs/mobile
# hoặc
pnpm add @vnkr-labs/mobile

Sử dụng

import { colors, spacing, radius, shadows, fonts, textSizes } from '@vnkr-labs/mobile';
import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.bgPage,
    paddingHorizontal: spacing.sp4,
  },
  card: {
    backgroundColor: colors.bgCard,
    borderRadius: radius.lg,
    ...shadows.card,
  },
  title: {
    fontFamily: fonts.display,
    fontSize: textSizes.h4,
    color: colors.textPrimary,
  },
  primaryButton: {
    backgroundColor: colors.brandDark,
    borderRadius: radius.pill,
    paddingVertical: 14,
    paddingHorizontal: spacing.sp6,
  },
  buyButton: {
    backgroundColor: colors.brandViolet,  /* từ Wallet details screen */
    borderRadius: radius.pill,
  },
  sellButton: {
    backgroundColor: colors.brandOrange,  /* từ Wallet details screen */
    borderRadius: radius.pill,
  },
});

API Reference

colors

Tất cả màu sắc từ Color palette.png:

Default Tones

colors.dark       // #000000 — CTA chính, text
colors.info       // #0095FF — Info badge, link
colors.success    // #00D68F — Thành công, published
colors.warning    // #FFAA00 — Cảnh báo, draft
colors.error      // #FF3D71 — Lỗi, breaking
colors.greyscale  // #2E3A59 — Text phụ
colors.white      // #FFFFFF

Brand Color Palette (8 màu)

colors.brandDark    // #000000 — CTA, logo
colors.brandGrey    // #EFEFEF — Input bg, surface
colors.brandMagenta // #FD9FDD — Notifications header
colors.brandOrange  // #FC7339 — Settings header, Sell btn
colors.brandGreen   // #8EFF6C — Home header, Cashback, Swap
colors.brandViolet  // #AF96FB — FAQ header, Buy btn, Splash
colors.brandBlue    // #49DBC8 — Home Services, Pay debt
colors.brandYellow  // #FFF172 — Trending, Send

Text

colors.textPrimary   // #1a1a2e
colors.textSecondary // #4a5568
colors.textMuted     // #718096
colors.textInverse   // #FFFFFF (trên nền tối)

Background

colors.bgPage    // #F5F6FA — nền trang
colors.bgCard    // #FFFFFF — card
colors.bgSurface // #EFEFEF — input bg

spacing

8px base system:

spacing.sp1  // 4
spacing.sp2  // 8
spacing.sp3  // 12
spacing.sp4  // 16  ← horizontal padding màn hình
spacing.sp6  // 24
spacing.sp8  // 32
// ...sp20: 80

radius

radius.sm   // 4  — badge nhỏ
radius.md   // 8  — button nhỏ
radius.lg   // 12 — input, card
radius.xl   // 16 — modal, bottom sheet
radius.pill // 50 — pill button (từ design)
radius.full // 9999 — avatar, toggle

shadows

React Native shadow objects (cả iOS + Android elevation):

shadows.xs    // rất nhẹ
shadows.sm    // nhẹ
shadows.md    // trung bình
shadows.lg    // đậm
shadows.card  // shadow màu brand (#0A3D62)

fonts

fonts.display // 'WorkSans'       — headings
fonts.body    // 'BeVietnamPro'   — body text
fonts.mono    // 'JetBrainsMono'  — code

Setup với Expo:

expo install @expo-google-fonts/work-sans @expo-google-fonts/be-vietnam-pro

textSizes

textSizes.displayXl // 48 — balance amount hero
textSizes.displayLg // 40 — h1
textSizes.h3        // 28
textSizes.h4        // 22
textSizes.h5        // 18
textSizes.b1        // 16 — body text
textSizes.b2        // 14 — meta text
textSizes.caption   // 12
textSizes.overline  // 10
textSizes.numpad    // 22 — numeric keypad

fontWeights

fontWeights.normal   // '400'
fontWeights.medium   // '500'
fontWeights.semibold // '600'
fontWeights.bold     // '700'

Screen Color Map

Màu header background theo từng màn hình (từ KE-HOACH-XAY-DUNG-UI.md):

| Màn hình | colors.* | |---|---| | Home, Cashback, Swap | brandGreen | | Home Services, Pay Debt | brandBlue | | FAQ | brandViolet | | Settings | brandOrange | | Notifications | brandMagenta | | Edit Profile | info | | Add Balance | brandViolet | | Crypto (empty) | bgCard |

Peer Packages

• @vnkr-labs/tokens — CSS version (web)
• @vnkr-labs/types — TypeScript types

VNKR Labs — vnkr.vn