Upgrade to V2 of the Mobile Design System

Reckon Mobile Design System v2.0 is a huge release that aims to improve consistancy around the APIs and codebase. Specifically we have aligned design tokens to the web design system, and improved the APIs for using those tokens.

Core tokens

Radii and Shape

The shape object, which was used to spread rounded shape styles onto style objects has been removed. The radii tokens, which are now the only way to use tokens related to border radius, have had a minor update.

export const radii = {
  none: 0,
  xsmall: 4,
  small: 6,
  medium: 8,
  large: 12,
  xlarge: 16,
- circle: 9999
+ full: 9999
};

// Best used with components with utility props
<Box rounding="small">
  ...
</Box>
// or if padding props are not available...
<View style={{ borderRadius: radii.small }}>
  ...
</View>

Spacing

In mobile, we had two conventions for spacing tokens - base8 scale and t-shirt size.

The t-shirt size scale was similar to what is being used in Reckon Web, but they have now been updated to match. Effectively we remove the 'gutter' name, and renamed preceeding keys to the 'next size up' (medium is now large etc).

The base8 scale has been removed.

export const spacing = {
  none: 0,
  xsmall: 4,
  small: 8,
+ medium: 12,
+ large: 16,
+ xlarge: 24,
+ xxlarge: 32,
+ xxxlarge: 40,
- gutter: 12,
- medium: 16,
- large: 24,
- xlarge: 32,
- xxlarge: 40,
- "0x": 0,
- "0.25x": 2,
- "0.5x": 4,
- "0.75x": 6,
- "1x": 8,
- "1.5x": 12,
- "2x": 16,
- "3x": 24,
- "4x": 32,
- "5x": 40,
- "6x": 48,
- "7x": 56,
- "8x": 64,
- "9x": 72,
- "10x": 80
}

// Best used with components with utility props
<Box padding="small">
  ...
</Box>
// or if padding props are not available...
<View style={{ padding: spacing.small }}>
  ...
</View>

Sizing

Sizing tokens have been completely replaced with those from Reckon Web.

export const sizing = {
+  none: 0,
+  xsmall: 24,
+  small: 32,
+  base: 40,
+  medium: 48,
+  large: 56,
+  xlarge: 72,
- "0": 0,
- "0.25x": 2,
- "0.5x": 4,
- "1x": 8,
- "1.5x": 12,
- "2x": 16,
- "3x": 24,
- "4x": 32,
- "5x": 40,
- "6x": 48,
- "7x": 56,
- "8x": 64,
- "9x": 72,
-  "10x": 80
};

// Best used with components with sizing utility props.
<Box height="small">
  ...
</Box>
// or if height/width props are not available...
<View style={{ height: sizing.small }}>
  ...
</View>

Components

Icon

In many places around the apps, we were using spacing tokens to define the size of the icons...

// Old convention for icon sizing.
<Icon icon="alert" size={sizing["1x"]} />

In v2, the sizes that were commonly used for icons no longer exist, as spacing is focused towards boxes and containers. We've introduced some new tokens for the icon component, which matches how we handle Icon sizing in Reckon Web.

We may add to these tokens in the future.

See the Icons page for more information.

Token	Size
`xxsmall`	8
`xsmall`	12
`small`	16
`medium`	24
`large`	32