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

paddingVertical: scenePadding,
    marginHorizontal: scenePadding,
    borderTopWidth: StyleSheet.hairlineWidth,
    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,

},
  sizeIndicatorContainer: {
    position: 'absolute',
    zIndex: 2,
    right: 0,
    top: 0,
    backgroundColor: 'rgba(0,0,0,0.8)',
  },
  sizeIndicator: {
    padding: 8,
    fontSize: 14,
    color: colors.white,
  },
  imageSize: {
    padding: 8,
    backgroundColor: colors.offWhite,
    justifyContent: 'center',
    alignItems: 'center',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
  },
  imageSizeText: {
    fontSize: 14,
  },
});

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

export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: colors.darkPurple,
  },
  imageContainer: {
    backgroundColor: colors.offBlack,
  },
  seperator: {
    marginBottom: 8,
  },
  buttonContainer: {
    backgroundColor: colors.offWhite,
    height: 40,
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
  button: {
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  button_50: {
    width: '50%',
  },
  icon: {
    fontSize: 24,
    color: colors.darkGrey,

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,
    textAlignVertical: 'center',
    fontWeight: 'bold',
  },
  itemUrl__selected: {
    color: colors.white,
  },
  checkmark: {
    width: 20,
    height: 20,
    borderRadius: 10,

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: {
    color: colors.orange,
    fontStyle: 'italic',
  },
});

outerText: {
    color: 'black',
    fontFamily: 'OpenSans',
    fontSize: 16,
    lineHeight: 18,
    fontWeight: 'bold',
  },
  innerText: {
    color: 'black',
    fontFamily: 'OpenSans',
    fontSize: 12,
    lineHeight: 12,
    fontWeight: '600',
  },
  parentItem: {
    backgroundColor: colors.offWhite,
    paddingHorizontal: 8,
    paddingVertical: 12,
    flexDirection: 'row',
    flex: 1,
  },
  itemSeperator: {
    borderWidth: 1,
    borderColor: colors.darkPurple,
  },
  iconContainer: { marginLeft: 2, justifyContent: 'center', width: 20 },
  icon: { fontSize: 10, color: '#444' },
  iconUnread: { color: '#f0705a' },
  detailsContainer: { alignItems: 'center', flexDirection: 'row', flex: 1 },
  userAvatar: { width: 40, height: 40, borderRadius: 20 },
  activityContainer: { flex: 1, justifyContent: 'center', marginLeft: 4 },
  activityTextContainer: {

import { StyleSheet } from 'react-native';
import { commonStyles } from 'kitsu/common/styles';
import * as colors from 'kitsu/constants/colors';

export const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    height: 30,
  },
  counterButton: {
    alignItems: 'center',
    backgroundColor: colors.offWhite,
    borderColor: colors.lightGrey,
    borderWidth: 1,
    height: 30,
    justifyContent: 'center',
    width: 32,
  },
  counterButtonLeft: {
    borderBottomLeftRadius: 10,
    borderTopLeftRadius: 10,
  },
  counterButtonRight: {
    borderBottomRightRadius: 10,
    borderTopRightRadius: 10,
  },
  counterStatusContainer: {
    alignItems: 'center',

justifyContent: 'flex-end',
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    backgroundColor: 'rgba(0,0,0,0.2)',
    zIndex: 2,
  },
  actionModalItem: {
    flexDirection: 'row',
    alignItems: 'center',
    height: 60,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    backgroundColor: colors.offWhite,
    padding: 12,
  },
  actionModalImage: {
    alignItems: 'center',
    justifyContent: 'center',
    width: 20,
  },
  actionModalIcon: {
    fontSize: 18,
    alignItems: 'center',
  },
  actionModalCancelContainer: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    alignItems: 'center',
    marginBottom: 8,

headerContainer: {
    backgroundColor: colors.listBackPurple,
    shadowColor: 'rgba(0,0,0,0.2)',
    shadowOffset: {
      width: 0,
      height: 3,
    },
    shadowOpacity: 0.5,
    elevation: 3,
    zIndex: 2,
  },
  listHeader: {
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    backgroundColor: colors.offWhite,
    borderBottomWidth: 1,
    borderBottomColor: colors.lightGrey,
  },
  listHeaderText: {
    fontFamily: 'OpenSans',
    fontWeight: '800',
    fontSize: 10,
    color: colors.grey,
    paddingVertical: 8,
  },
  searchBox: {
    height: 35,
    margin: 10,
  },
  loading: {
    alignItems: 'center',

backgroundColor: colors.green,
  },
  uploadContainer: {
    marginBottom: 10,
  },
  padTop: {
    paddingTop: 10,
  },
  header: {
    height: navigationBarHeight + statusBarHeight + (isX ? paddingX : 0),
    paddingTop: statusBarHeight + (isX ? paddingX : 0),
  },
  actionBar: {
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: colors.offWhite,
    borderTopWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    height: 60,
  },
  actionBarText: {
    padding: 12,
    flex: 1,
    color: colors.softBlack,
  },
  actionBarImages: {
    paddingRight: 12,
    flexDirection: 'row',
    alignItems: 'center',
  },
  actionBarImage: {
    width: 20,