@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 |