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

progressBarBackground: {
    backgroundColor: colors.lightGrey,
  },

  progressIconCircle: {
    width: 30,
    height: 30,
    borderRadius: 15,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    alignItems: 'center',
    justifyContent: 'center',
  },
  progressIconCircle__completed: {
    backgroundColor: colors.green,
    borderColor: colors.green,
  },
  progressIcon: {
    fontSize: 28,
    backgroundColor: 'transparent',
    paddingTop: Platform.select({ ios: 4, android: 0 }),
  },
  arrowIcon: {
    fontSize: 20,
    marginLeft: 10,
    color: colors.lightGrey,
  },
  streamingLinks: {
    paddingBottom: scenePadding,
  },
  streamingLinksContent: {
    paddingLeft: scenePadding,

},
  progressBarBackground: {
    backgroundColor: colors.lightGrey,
  },

  progressIconCircle: {
    width: 30,
    height: 30,
    borderRadius: 15,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    alignItems: 'center',
    justifyContent: 'center',
  },
  progressIconCircle__completed: {
    backgroundColor: colors.green,
    borderColor: colors.green,
  },
  progressIcon: {
    fontSize: 28,
    backgroundColor: 'transparent',
    paddingTop: Platform.select({ ios: 4, android: 0 }),
  },
  arrowIcon: {
    fontSize: 20,
    marginLeft: 10,
    color: colors.lightGrey,
  },
  streamingLinks: {
    paddingBottom: scenePadding,
  },
  streamingLinksContent: {

},
  progressIconContainer: {
    paddingLeft: 8,
    paddingVertical: 4,
  },
  progressIconCircle: {
    width: 30,
    height: 30,
    borderRadius: 15,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.lightGrey,
    alignItems: 'center',
    justifyContent: 'center',
  },
  progressIconCircle__completed: {
    backgroundColor: colors.green,
    borderColor: colors.green,
  },
  progressIcon: {
    fontSize: 28,
    backgroundColor: 'transparent',
    paddingTop: Platform.select({ ios: 4, android: 0 }),
  },

  sortingContainer: {
    backgroundColor: colors.listBackPurple,
    justifyContent: 'flex-end',
    padding: 8,
  },
  sortingText: {
    fontSize: 12,
    color: 'white',

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

export const styles = StyleSheet.create({
  mediaTagView: {
    marginTop: scenePadding,
    flexDirection: 'row',
    alignItems: 'center',
  },
  mediaTag: {
    paddingHorizontal: 5,
    paddingVertical: 3,
    borderRadius: 4,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.green,
  },
  episodeTagView: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  episodeTagLine: {
    height: StyleSheet.hairlineWidth,
    width: 10,
    backgroundColor: colors.green,
  },
});

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,
  },
  text: {
    fontSize: 16,
    textAlign: 'center',
  },
  loading: {
    position: 'absolute',
    top: 0,

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,
    borderWidth: StyleSheet.hairlineWidth,
    borderColor: colors.darkGrey,
    alignItems: 'center',

);
  }
}

noticeContainer: {
    padding: 10,
    justifyContent: 'center',
    alignItems: 'center',
    flex: 3,
    backgroundColor: colors.white,
    marginBottom: 6,
    position: 'relative',
  },
  noticeText: {
    fontWeight: '600',
    fontFamily: 'Open Sans',
    paddingVertical: 10,
  },
  actionButton: {
    backgroundColor: colors.green,
    borderRadius: 4,
    paddingHorizontal: 12,
    paddingVertical: 8,
  },
  actionButtonText: {
    color: colors.white,
  },
  closeIcon: {
    position: 'absolute',
    right: 5,
    top: 5,
    color: colors.grey,
    fontSize: 18,
  },
  outerText: {
    color: 'black',

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

export const styles = StyleSheet.create({
  button: {
    marginVertical: 4,
    marginHorizontal: 16,
    backgroundColor: colors.green,
    height: 47,
    borderRadius: 8,
  },
  buttonDisabled: {
    backgroundColor: colors.buttonDisabledColor,
  },
  contentWrapper: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    color: colors.white,
    fontFamily: 'OpenSans',
    lineHeight: Platform.select({ ios: 25, android: 20 }),