@vivintsolar-oss/native-vs-constants

yarn add @vivintsolar-oss/native-vs-constants
// or
// npm install @vivintsolar-oss/native-vs-constants

Constant

These are the Layout & Color constants that we use to make styles consistent among native apps.

import Colors from '@vivintsolar-oss/native-vs-constants/Colors';
import Layout from '@vivintsolar-oss/native-vs-constants/Layout';

input: {
  width: Layout.window.width,
  height: 48,
  borderWidth: 1,
  borderRadius: 4,
  marginVertical: Layout.EDGE_PADDING,
  padding: Layout.INNER_PADDING,
  borderColor: Colors.BORDER_GRAY,
}

Colors

Brand specific UI colors

Name	Value
ORANGE	#FF8200
BLACK	#1F2123
DARK_GRAY	#4a4a4a
MEDIUM_GRAY	#656769
LIGHT_GRAY	#979797
BORDER_GRAY	#D9DADB
LIGHTER_GRAY	#e7e7e7
BACKGROUND_GRAY	#EDEEEF
OFF_WHITE	#f7f8f8
WHITE	#ffffff
BLUE	#3FBFAD
LOGO_ORANGE	#FF4E00
PRIMARY	#3FBFAD
PRODUCTION	#3FBFAD
CONSUMPTION	#979797
BATTERY_USE	#57c1e8
BATTERY_CHARGE	#3ba126
BATTERY_EXPORT	#97d7ce
GRID_USE	#e96565
ERROR	#E74C3C

Layout

Deals mostly with pixel related values like height, width, margin, & padding.

Name	Value
OUTER_PADDING	20
INNER_PADDING	20
EDGE_PADDING	20
ICON_GAP	10
window.width	represents the full width of the device
window.height	represents the full height of the device