@vivintsolar-oss/native-vs-constants

Constants for VSLR UI kit

Usage no npm install needed!

<script type="module">
  import vivintsolarOssNativeVsConstants from 'https://cdn.skypack.dev/@vivintsolar-oss/native-vs-constants';
</script>

README

@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