How to use the kitsu/constants/colors.lightestGrey function in kitsu

import { StyleSheet, Platform } from 'react-native';
import * as colors from 'kitsu/constants/colors';
import { isX, safeAreaInsetX } from 'kitsu/utils/isX';

export const styles = StyleSheet.create({
  container: {
    marginBottom: isX ? safeAreaInsetX.bottom : 0,
    flex: 1,
  },
  seperator: {
    height: StyleSheet.hairlineWidth,
    backgroundColor: colors.lightestGrey,
  },
  item: {
    paddingBottom: 8,
  },
  itemContainer: {
    padding: 8,
    marginBottom: 8,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.offWhite,
  },
  item__selected: {
    backgroundColor: colors.green,
  },
  itemUrl: {
    flex: 1,

borderWidth: 1,
    borderColor: colors.lightestGrey,
    padding: 8,
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  changeEmbed: {
    marginRight: 4,
  },
  clearEmbed: {
    backgroundColor: colors.red,
  },
  emptyEmbed: {
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    height: 70,
    marginHorizontal: 8,
    marginTop: 4,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.lightestGrey,
  },
  emptyEmbedText: {
    color: colors.darkGrey,
  },
});

justifyContent: 'center',
    alignItems: 'center',
  },
  embed: {
    marginVertical: 4,
  },
  embedOptions: {
    flexDirection: 'row',
    flex: 1,
    justifyContent: 'space-around',
    marginHorizontal: 8,
    marginTop: 4,
  },
  embedText: {
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    padding: 8,
    justifyContent: 'center',
    alignItems: 'center',
    flex: 1,
  },
  changeEmbed: {
    marginRight: 4,
  },
  clearEmbed: {
    backgroundColor: colors.red,
  },
  emptyEmbed: {
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    height: 70,
    marginHorizontal: 8,

},
  logo: {
    width: 120,
    height: 32,
    resizeMode: 'contain',
  },
  buttonRight: {
    width: 70,
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingRight: 8,
  },
  buttonRightText: {
    fontFamily: 'OpenSans',
    fontSize: 13,
    color: colors.lightestGrey,
    backgroundColor: colors.transparent,
  },
  buttonRightEnabled: {
    color: colors.yellow,
  },
});

borderTopColor: colors.lightGrey,
  },
  postActionButton: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
  },

  postFooter: {
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: colors.lightGrey,
    backgroundColor: colors.offWhite,
  },
  postReplyBanner: {
    backgroundColor: colors.lightestGrey,
    padding: 10,
    display: 'flex',
    justifyContent: 'space-between',
    flexDirection: 'row',
    alignItems: 'center',
  },
  postSection: {
    padding: scenePadding,
  },
  postCommentsSection: {
    padding: scenePadding,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: colors.lightGrey,
    backgroundColor: colors.offWhite,
  },
  linkStyle: {

},
  changeEmbed: {
    marginRight: 4,
  },
  clearEmbed: {
    backgroundColor: colors.red,
  },
  emptyEmbed: {
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    height: 70,
    marginHorizontal: 8,
    marginTop: 4,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: colors.lightestGrey,
  },
  emptyEmbedText: {
    color: colors.darkGrey,
  },
});

import { StyleSheet, Platform } from 'react-native';
import * as colors from 'kitsu/constants/colors';

export const styles = StyleSheet.create({
  bubble: {
    alignSelf: 'flex-start',
    paddingVertical: 7,
    paddingHorizontal: 14,
    borderRadius: 20,
    backgroundColor: colors.lightestGrey,
  },
  emptyBubble: {
    backgroundColor: 'transparent',
  },
  commentActions: {
    flexDirection: 'row',
    alignItems: 'center',
    paddingLeft: 14,
    paddingTop: 5,
  },
  commentActionItem: {
    marginLeft: 14,
    flexDirection: 'row',
    alignItems: 'center',
  },
  likeIcon: {

descriptionView: {
    backgroundColor: '#FFFFFF',
    paddingHorizontal: scenePadding,
    marginTop: scenePadding,
  },
  statusView: {
    flexDirection: 'row',
    paddingHorizontal: scenePadding,
    marginTop: scenePadding,
    alignItems: 'center',
  },
  kitsuScore: {
    flexDirection: 'column',
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    paddingVertical: 4,
    paddingHorizontal: 14,
    marginRight: 6,
    alignItems: 'center',
    justifyContent: 'center',
  },
  kitsuScoreText: {
    margin: 2,
  },
  subStatusView: {
    flexDirection: 'column',
    padding: 4,
    justifyContent: 'center',
  },
  statusItemView: {
    flexDirection: 'row',

zIndex: 2,
    backgroundColor: 'rgba(0, 0, 0, 0.95)',
    justifyContent: 'center',
  },
  selectedButtonContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  button: {
    margin: 10,
    minWidth: 100,
    height: 40,
    alignContent: 'center',
    justifyContent: 'center',
    borderWidth: 1,
    borderColor: colors.lightestGrey,
    borderRadius: 4,
    flex: 1,
  },
  back: {
    color: colors.red,
  },
  select: {
    color: colors.green,
  },
  backButton: {
    borderColor: colors.red,
    marginRight: 5,
  },
  selectButton: {
    borderColor: colors.green,
    marginLeft: 5,

import { scenePadding } from 'kitsu/screens/Feed/constants';

const text = {
  color: colors.lightGrey,
  fontFamily: 'OpenSans',
  fontSize: 10,
  fontWeight: '800',
};

export const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    flexDirection: 'column',
    alignContent: 'center',
    justifyContent: 'center',
    backgroundColor: colors.lightestGrey,
    borderColor: colors.lightGrey,
    borderWidth: 1,
    borderRadius: 5,
    margin: scenePadding,
    padding: scenePadding * 1.5,
  },
  backgroundText: {
    position: 'absolute',
    right: scenePadding,
    ...text,
    fontSize: 26,
  },
  foregroundText: {
    ...text,
    flex: 1,
    textAlign: 'center',