How to use the @kiwicom/orbit-design-tokens.defaultTokens.paletteInkLighter function in @kiwicom/orbit-design-tokens

line: {
    flexDirection: 'row',
    height: parseInt(defaultTokens.heightButtonNormal, 10),
  },
  icon: {
    paddingHorizontal: parseInt(defaultTokens.spaceSmall, 10),
    justifyContent: 'center',
  },
  radio: {
    flex: 1,
    paddingEnd: parseInt(defaultTokens.spaceMedium, 10),
    alignItems: 'center',
    justifyContent: 'space-between',
  },
  radioUnderline: {
    borderBottomColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  label: {
    fontSize: parseInt(defaultTokens.fontSizeButtonLarge, 10),
    color: defaultTokens.colorTextAttention,
  },
});
export default SelectOption;

{warning != null && (
          
        )}
      
    );
  }
}

const styles = StyleSheet.create({
  container: {
    height: 22,
    paddingVertical: 2,
    paddingHorizontal: 7,
    backgroundColor: defaultTokens.paletteCloudLight,
    borderRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderColor: defaultTokens.paletteInkLighter,
    borderWidth: 0.5,
    flexDirection: 'row',
    alignItems: 'center',
  },
  informationContainer: {
    marginStart: 19,
  },
  warningContainer: {
    flex: 1,
    marginEnd: 24,
  },
});

contentContainer: {
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
  },
  slider: {
    paddingHorizontal: 30,
  },
  track: {
    height: TRACK_HEIGHT,
  },
  selected: {
    backgroundColor: defaultTokens.paletteBlueNormal,
  },
  unselected: {
    backgroundColor: defaultTokens.paletteInkLighter,
  },
  labelContainer: {
    paddingHorizontal: 20,
    flexDirection: 'row',
    alignItems: 'center',
  },
  resultContainer: {
    flexDirection: 'row',
    backgroundColor: defaultTokens.paletteBlueNormal,
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 20,
  },
});

flexDirection: 'row',
    flex: 1,
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
  },
  longSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
  shortSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
});

alignItems: 'center',
  },
  wrapper: {
    alignItems: 'center',
    flexDirection: 'row',
    flex: 1,
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
  },
  longSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
  shortSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
});

marginBottom: 3,
    zIndex: parseFloat(defaultTokens.zIndexModal),
  },
  arrow: {
    width: 7,
    height: 7,
    position: 'relative',
  },
  arrowHalf: {
    position: 'absolute',
    backgroundColor: defaultTokens.backgroundButtonSecondaryActive,
  },
  arrowLeft: {
    width: 7,
    height: 2,
    backgroundColor: defaultTokens.paletteInkLighter,
    borderBottomStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    position: 'absolute',
    bottom: 0,
  },
  arrowRight: {
    height: 7,
    width: 2,
    backgroundColor: defaultTokens.paletteInkLighter,
    borderTopStartRadius: parseFloat(defaultTokens.borderRadiusNormal),
    borderTopEndRadius: parseFloat(defaultTokens.borderRadiusNormal),
    end: 0,
    position: 'absolute',
  },
  upperArrowContainer: { marginTop: -4 },
  lowerArrowContainer: { marginTop: 4 },

const chevronIconName = detailOpened ? 'chevron-up' : 'chevron-down';

  return (

alignItems: 'center',
  },
  wrapper: {
    alignItems: 'center',
    flexDirection: 'row',
    flex: 1,
  },
  contentContainer: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingVertical: 10,
  },
  longSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
  shortSeparator: {
    borderColor: defaultTokens.paletteInkLighter,
    borderBottomWidth: parseFloat(defaultTokens.borderWidthCard),
  },
});

oneWayComponent={}
          returnComponent={}
          multicityComponent={}
        />
      
      
      
    
  );
}

const styles = StyleSheet.create({
  card: {
    paddingHorizontal: 0,
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: defaultTokens.paletteInkLighter,
    paddingBottom: 0,
  },
  cardPaddingContainer: {
    paddingHorizontal: 18,
  },
  separator: {
    marginTop: 7,
    marginBottom: 17.5,
  },
  bottomSeparator: {
    marginTop: 16,
  },
});

export default createFragmentContainer(SectorDetails, {
  data: graphql`