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