@ornikar/bumper 1.1.0

package/src/themes/__snapshots__/light.stories.tsx.snap

@@ -0,0 +1,2192 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`bumper/Theme Light 1`] = `
+<RNCSafeAreaProvider
+  onInsetsChange={[Function]}
+  style={
+    [
+      {
+        "flex": 1,
+      },
+      undefined,
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "flexDirection": "column",
+        "paddingBottom": 4,
+        "paddingLeft": 4,
+        "paddingRight": 4,
+        "paddingTop": 4,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "fontFamily": "GTStandardSemibold",
+          "fontSize": 38,
+          "letterSpacing": 0,
+          "lineHeight": 48,
+          "marginBottom": 4,
+        }
+      }
+      suppressHighlighting={true}
+    >
+      Tokens
+    </Text>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.base.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #101010
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#101010",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.base.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #505050
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#505050",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.base.low
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #838383
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#838383",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.base.onContrasted.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #ffffff
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#ffffff",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.base.onContrasted.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #FFFFFFCC
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#FFFFFFCC",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.base.onContrasted.low
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #FFFFFF99
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#FFFFFF99",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.accent
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #563B56
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.promo
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #43390A
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#43390A",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.promo.onContrasted
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #FFF500
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#FFF500",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.info
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #125A87
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#125A87",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.success
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #357105
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#357105",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.warning
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #BA930B
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#BA930B",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.danger
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #BD100F
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#BD100F",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.muted
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #C1B59F
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#C1B59F",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.disabled
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #A8A8A8
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#A8A8A8",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        content.disabled.onContrasted
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #ECECEC
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#ECECEC",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.hi.default
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #F1ECE4
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#F1ECE4",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.hi.pressed
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #EAE3D6
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#EAE3D6",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.mid.default
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #F7F4EE
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#F7F4EE",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.mid.pressed
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #F1ECE4
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#F1ECE4",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.low.default
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #ffffff
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#ffffff",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.base.low.pressed
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #F7F4EE
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#F7F4EE",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.accent.default
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #563B56
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#563B56",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.accent.pressed
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #6E4D6E
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#6E4D6E",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.promo.hi.default
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #43390A
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#43390A",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.promo.hi.pressed
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #594D0D
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#594D0D",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.promo.mid.default
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #FFF500
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#FFF500",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.promo.mid.pressed
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #FFF966
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#FFF966",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.highlight.default
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #E9F4FC
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#E9F4FC",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.highlight.pressed
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #BCDFF6
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#BCDFF6",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.info.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #1772AB
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#1772AB",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.info.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #E9F4FC
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#E9F4FC",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.success.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #438D06
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#438D06",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.success.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #ECFEDD
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#ECFEDD",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.warning.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #EFC11F
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#EFC11F",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.warning.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #FDF8E7
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#FDF8E7",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.danger.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #F14847
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#F14847",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.danger.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #FDE4E3
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#FDE4E3",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.disabled.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #A8A8A8
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#A8A8A8",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.disabled.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #ECECEC
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#ECECEC",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        bg.overlay
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #10101080
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#10101080",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.base.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #101010
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#101010",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.base.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #A8A8A8
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#A8A8A8",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.base.onContrasted.hi
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #ffffff
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#ffffff",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#563B56",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.base.onContrasted.mid
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #FFFFFF99
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#FFFFFF99",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.info
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #1772AB
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#1772AB",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.success
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #438D06
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#438D06",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.warning
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #EFC11F
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#EFC11F",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.danger
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #F14847
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#F14847",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+    <View
+      style={
+        {
+          "backgroundColor": "#ffffff",
+          "borderBottomColor": "#A8A8A8",
+          "borderBottomWidth": 2,
+          "borderStyle": "solid",
+          "flexDirection": "column",
+          "paddingBottom": 8,
+          "paddingTop": 8,
+        }
+      }
+    >
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        border.disabled
+      </Text>
+      <Text
+        style={
+          {
+            "fontFamily": "GTStandard",
+          }
+        }
+        suppressHighlighting={true}
+      >
+        #CDCED0
+      </Text>
+      <View
+        style={
+          {
+            "backgroundColor": "#CDCED0",
+            "height": 20,
+            "width": 20,
+          }
+        }
+      />
+    </View>
+  </View>
+</RNCSafeAreaProvider>
+`;