Colors

Colors

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

Design Tokens

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

Token

Light Mode

Dark Mode

$backgroundDefault

$backgroundElevated

$backgroundElevatedLight

$backgroundNeutralHeavy

$backgroundNeutralIdle

$backgroundNeutralMedium

$backgroundNeutral

$backgroundNeutralLight

$backgroundPrimaryHeavy

$backgroundPrimaryMedium

$backgroundPrimaryLight

$backgroundGeneralHeavy

$backgroundGeneralMedium

$backgroundGeneralLight

$backgroundSuccessHeavy

$backgroundSuccessLight

$backgroundWarningHeavy

$backgroundWarningLight

$backgroundMajorLight

$backgroundMajorHeavy

$backgroundDangerHeavy

$backgroundDangerLight

$backgroundDisabled

$backgroundDark

$backgroundDarkElevated

$backgroundDarkActive

$backgroundInverted

• 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.

System Colors

System Colors

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

Base Palette

AAA

Grey 1

#13191E

AAA

Grey 5

#1E2830

AAA

Grey 10

#20303C

AAA

Grey 20

#4D5963

AAA

Grey 30

#6E7881

AAA

Grey 40

#A6ACB1

AAA

Grey 50

#D2D6D8

AAA

Grey 60

#E8ECF0

AAA

Grey 70

#F0F2F5

AAA

Grey 80

#F8f9FA

AAA

Violet 1

#170E5C

AAA

Violet 5

#231690

AAA

Violet 10

#3220CD

AAA

Violet 20

#4633E9

AAA

Violet 30

#5A48F5

AAA

Violet 40

#8579FF

AAA

Violet 50

#B2ABFF

AAA

Violet 60

#D1CCFF

AAA

Violet 70

#E3E0FF

AAA

Violet 80

#F0EEFF

AAA

Blue 1

#092E76

AAA

Blue 5

#0C3E9D

AAA

Blue 10

#0F4DC4

AAA

Blue 20

#0F59E6

AAA

Blue 30

#116DFF

AAA

Blue 40

#3582FF

AAA

Blue 50

#81B4FF

AAA

Blue 60

#97C7FF

AAA

Blue 70

#C4DFFF

AAA

Blue 80

#E9F3FF

AAA

Green 1

#004030

AAA

Green 5

#006047

AAA

Green 10

#008563

AAA

Green 20

#009872

AAA

Green 30

#00A87E

AAA

Green 40

#45C3A4

AAA

Green 50

#85DEC8

AAA

Green 60

#B3EBDD

AAA

Green 70

#CFF2E9

AAA

Green 80

#E3F7F2

AAA

Red 1

#5F140F

AAA

Red 5

#9E1E11

AAA

Red 10

#D52712

AAA

Red 20

#E93222

AAA

Red 30

#FC3D2F

AAA

Red 40

#FD7267

AAA

Red 50

#FEA6A0

AAA

Red 60

#FFC9C5

AAA

Red 70

#FFDEDC

AAA

Red 80

#FFEDEC

AAA

Yellow 1

#6A4300

AAA

Yellow 5

#9C6600

AAA

Yellow 10

#E89900

AAA

Yellow 20

#F7AE00

AAA

Yellow 30

#FFC50D

AAA

Yellow 40

#FFD54E

AAA

Yellow 50

#FFE48D

AAA

Yellow 60

#FFEEB9

AAA

Yellow 70

#FFF4D3

AAA

Yellow 80

#FFF9E4

AAA

Orange 1

#762D00

AAA

Orange 5

#9E3900

AAA

Orange 10

#CD4700

AAA

Orange 20

#E95504

AAA

Orange 30

#FB6413

AAA

Orange 40

#FC8E53

AAA

Orange 50

#FDB893

AAA

Orange 60

#FED4BD

AAA

Orange 70

#FFE5D7

AAA

Orange 80

#FFF1EA

AAA

black

#000000

AAA

white

#FFFFFF

AAA

dark

#0E1216

Accessibility

Dev

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.green70
Colors.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); // true
Colors.isDark(Colors.grey80); // false