Design tokens | NativeBase

Design tokens are the values or constants needed to construct a design system. These values can represent spacing, color, typography etc. Design tokens help to achieve consistency in building user interfaces across all platforms.

Let's take an example by defining a space and color design token.

Copy
const colors = {
  primary: {
    50: '#ecfeff',
    100: '#cffafe',
    200: '#a5f3fc',
    300: '#67e8f9',
    400: '#22d3ee',
    500: '#06b6d4',
    600: '#0891b2',
    700: '#0e7490',
    800: '#155e75',
    900: '#164e63',
  },
};

Copy
export const spacing = {
  px: 1,
  1: 4,
  2: 8,
  3: 12,
  4: 16,
  5: 20,
  6: 24,
  7: 28,
  8: 32,
  9: 36,
  10: 40,
  12: 48,
  16: 64,
  20: 80,
  24: 96,
  32: 128,
  40: 160,
  48: 192,
  56: 224,
  64: 256,
  72: 288,
  80: 320,
  96: 384,
};

We can use the above tokens in our code instead of using absolute values.

Copy
<Box mt="4" bg="primary.500"></Box>

The above Box will be translated to

Copy
<View style={{ marginTop: 16, backgroundColor: 'cyan.500' }} />

With NativeBase, you can create your own design system. NativeBase follows the

styled-system's specification

to construct design systems.

Checkout the default NativeBase theme
and how to customize it here
.

Utility Props Specificity

Pseudo Props: Overview

MadeWithNativeBase

gluestack-ui

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.

Design tokens | NativeBase | Universal Components for React and React Native

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.