Colors

Colors

Our default library Colors object is using System Colors and Design Tokens.

System Colors

The System Colors are all the colors we use in our design system. (red30, grey10 and so on).

Design Tokens

Design Tokens are contextual colors based on the system colors.
The design token name structure is "$[property]-[semantic]-[weight]". (e.g $backgroundPrimaryHeavy, $textSuccessLight)

• Property - The property we use this token for. The properties are:
  • background
  • text
  • icon
  • outline

• Semantic - the meaning of the color, what is the message that we want to pass using this color. The semantics are:
  • neutral
  • primary - the primary color of the app, means, blue for Spaces app and green for Fit app.
  • general
  • success
  • warning
  • danger
  • disabled
  • inverted
  • default

• Weight - the weight of the color (optional). The weights are:
  • light
  • medium
  • heavy

So, for example, a valid token can be: $backgroundPrimaryHeavy or $textSuccess. A full list of our design tokens can be found here -

Dark Mode Support

By using design tokens, your getting dark mode support out of the box! Each token is mapped to a single system color in light mode and to a (usually different) single system color in dark mode. For example, $textSuccess is mapped to green10 in light (deafult) mode, and to green60 in dark mode. All the design tokens and their mapping in light mode can be found here, dark mode mapping can be found here.

Add Your Own Design Tokens

Adding or overriding your own design tokens can be done by using the loadSchemes method. To generate the design tokens, based on your app primary color and load them automatically into the Colors object, use:

Colors.loadDesignTokens({primaryColor: <your primary color>});

This method will update all the primary tokens to be based on your app primary color, both in light and dark mode.

loadColors

Load a set of colors to be used in the app.
These colors will be accessible through the Colors class and as modifiers. usage:

import {Colors} from 'react-native-ui-lib';
Colors.loadColors({  error: '#ff2442',  success: '#00CD8B',  text: '#20303C'});

import {View, Text, Colors} from 'react-native-ui-lib';
<View>  <Text style={{color: Colors.error}}>Error Message</Text>  <Text success>Success Message</Text><View>

loadSchemes

Load a set of scheme colors to support dark/light mode.
This feature works hand in hand with our modifiers This method also supports adding and overriding design tokens:

Colors.loadSchemes({  light: {    screenBG: 'transparent',    textColor: Colors.grey10,    moonOrSun: Colors.yellow30,    mountainForeground: Colors.green30,    mountainBackground: Colors.green50,    $backgroundSuccess: Colors.green40,    $backgroundSuccessLight: Colors.green70   },  dark: {    screenBG: Colors.grey10,    textColor: Colors.white,    moonOrSun: Colors.grey80,    mountainForeground: Colors.violet10,    mountainBackground: Colors.violet20,    $backgroundSuccess: Colors.green40,    $backgroundSuccessLight: Colors.green20   }});

<View flex padding-page bg-screenBG>  <Text h1 textColor>    Dark Mode  </Text>      </View>

Note: for dark mode support please add the following require in your app, in an initial place, before importing react-native-ui-lib at the first time.

require('react-native-ui-lib/config').setConfig({appScheme: 'default'});

rgba

usage:

import {Colors} from 'react-native-ui-lib';
Colors.rgba('#ff2442', 0.05); // 'rgb(255, 36, 66, 0.05)'Colors.rgba(44, 224, 112, 0.2); // 'rgb(44, 224, 112, 0.2)'

getColorTint

usage:

import {Colors} from 'react-native-ui-lib';
Colors.getColorTint(Colors.green30, 70); // will return the value of Colors.green70Colors.getColorTint('#ff2442', 50); // will return the 5th tint in an autogenerate 8-tints palette based on '#ff2442'

isDark

returns true if a color is considered dark (bright colors will return false)

import {Colors} from 'react-native-ui-lib';
Colors.isDark(Colors.grey10); // trueColors.isDark(Colors.grey80); // false